/*/*/*/*/*/*    .custom-overlay {
        position: relative; /* Keeps it in normal document flow */
        z-index: 2; /* Optional: Keeps it above the image but below future elements */
      }
      /* Marquee responsive styles */
/* Desktop - default stays as flex row */

/* Tablet & Mobile - horizontal scroll */
@media (max-width: 768px) {
  .marquee-track {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 2rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* space for hidden scrollbar */
  }
  .marquee-track .card {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  .marquee-track::-webkit-scrollbar {
    display: none; /* hide scrollbar */
  }
  .marquee-track i {
    font-size: 2rem !important; /* smaller icons */
  }
  .marquee-track h5 {
    font-size: 1rem;
  }
}

/*for sir abbas center alignement of steps*/


/* Extra small devices */

/* On mobile, stack image and text vertically */
@media (max-width: 576px) {
  #choose .row.align-items-center {
    flex-direction: column !important;
  }
  #choose img {
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }
  #choose p {
    text-align: center;

  }
}

/*<!-- style for the cards -->*/

   .service-card {
  background: rgba(0, 0, 0, 0.6); /* Transparent black */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle glass border */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
  min-height: 320px; /* Keep height consistent */
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-15px);
 box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2), 
            0 15px 8px rgba(255, 255, 255, 0.05);

}

.icon-centered {
  font-size: 3rem;
  display: inline-block;
}

/*<!-- styling for the cards of core values -->*/

  .bg-gradient-integrity {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
  }
  .bg-gradient-partnership {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  }
  .bg-gradient-excellence {
    background: linear-gradient(135deg, #ff512f, #dd2476);
  }
  .bg-gradient-care {
    background: linear-gradient(135deg, #11998e, #38ef7d);
  }
  .hover-value{
    transition: all 0.3s ease;
  }
  .hover-value:hover{
    transform: scale(1.1);
  }
  /* Responsive styles */
@media (max-width: 768px) {
  /* Core value circles */
  .hover-value {
    width: 150px !important;
    height: 150px !important;
  }
  .hover-value h4 {
    font-size: 1rem;
  }
  .hover-value i {
    font-size: 1.5rem !important;
  }
  
  /* Reduce section gap */
  #values .row {
    gap: 20px;
  }

  /* Bottom feature cards */
  .card[style*="width: 280px"] {
    width: 100% !important;
    padding: 20px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .hover-value {
    width: 120px !important;
    height: 120px !important;
  }
  .hover-value h4 {
    font-size: 0.9rem;
  }
  .hover-value i {
    font-size: 1.3rem !important;
  }
  section .d-flex {
    gap: 20px !important;
  }
}

/*core-values*/
.value-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
/* Pricing section responsive styles */
@media (max-width: 768px) {
  #pricing h2 {
    font-size: 1.75rem; /* smaller heading on tablet/mobile */
  }
  #pricing p.lead {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 10px; /* small horizontal padding */
  }
}

@media (max-width: 480px) {
  #pricing h2 {
    font-size: 1.5rem;
  }
  #pricing p.lead {
    font-size: 0.95rem;
  }
}


.hover-scale {
  transition: all 0.001s ease-out;
  will-change: transform, box-shadow;
}
.hover-scale:hover {
  transform: translateY(-8px) scale(1.05) !important;
  box-shadow:
    0 8px 24px rgba(255 255 255 / 0.2),
    0 15px 8px rgba(255 255 255 / 0.05) !important;
}
/* Main heading */
.main-heading {
  font-family: 'YourFontHere', sans-serif;
  font-weight: bold;
  font-style: italic;
  line-height: 1.2;
  word-break: break-word;
  /* Responsive font size: min 24px, preferred 5vw, max 48px */
  font-size: clamp(24px, 5vw, 48px);
}

/* Sub heading */
.sub-heading {
  margin-top: 1rem;
  line-height: 1.5;
  font-weight: normal;
  word-break: break-word;
  /* Responsive font size: min 16px, preferred 3vw, max 28px */
  font-size: clamp(16px, 3vw, 28px);
}
.steps-section {
  width: 90%;
  margin: auto;
  padding: 3rem 0;
}

.steps-row {
  display: flex;
  
 align-items: center;
 justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.step-card {
  flex: 1 1 300px; /* responsive sizing */
  max-width: 330px;
  min-height: 280px;
  background: linear-gradient(to bottom, #222, #000);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  text-align: left;
}

.step-card .card-body {
  padding: 1.2rem;
}

.step-card h5 {
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: 0.8rem;
}

.step-card p {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
 
}

/* Arrows */
.arrow {
  font-size: clamp(24px, 4vw, 40px);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive arrows: right on desktop, down on mobile */
@media (max-width: 768px) {
  .steps-row {
    flex-direction: column;
  }
  .arrow::before {
    content: "↓"; /* arrow down */
  }
}
@media (min-width: 769px) {
  .arrow::before {
    content: "→"; /* arrow right */
  }
}


*/*/*/*/*/*/